<template>
  <Drawer class="preview-form" v-model:visible="visible" :width="720" :closable="false">
    <Form v-bind="formConf" ref="formRef" :model="formState">
      <Row :gutter="formConf.gutter">
        <Col v-for="(item, index) of previewForm" :key="index" :span="item.span">
          <FormItem v-bind="item.__config__">
            <component :is="dragComp(item)" />
          </FormItem>
        </Col>
      </Row>
      <FormItem>
        <div class="text-right">
          <Button type="primary" @click.prevent="onSubmit">提交</Button>
          <Button style="margin-left: 10px" @click="reset">重置</Button>
        </div>
      </FormItem>
    </Form>
    <template #footer></template>
  </Drawer>
</template>
<script lang="tsx" setup>
  import { toRefs, ref } from 'vue';
  import { Form, FormItem, Row, Col, Button, FormInstance, Drawer } from 'ant-design-vue';
  import { cloneDeep } from 'lodash-es';
  import { useFormStore } from '/@/store/modules/workFlow/form';
  import { renderItem } from '../CustomForm/src/render';
  const formStore = useFormStore();
  const formRef = ref<FormInstance>();
  const formConf = ref();
  const visible = ref(false);
  const { formState, previewForm } = toRefs<any>(formStore);
  /**
   * 显示弹框
   */
  const show = () => {
    visible.value = true;
    previewForm.value = cloneDeep(formStore.drawingList);
    formConf.value = cloneDeep(formStore.formConf);
    formRef.value?.resetFields();
  };
  const dragComp = (item) => {
    return renderItem(item, formState.value, true);
  };
  /**
   * 提交表单
   */
  const onSubmit = () => {
    formRef.value?.validate().then((res) => {
      console.log(11, res);
      console.log(JSON.stringify(previewForm.value));
    });
  };
  /**
   * 重置表单
   */
  const reset = () => {
    formRef.value?.resetFields();
    previewForm.value.map((i) => {
      if (i.defaultValue === true) {
        i.defaultValue = false;
      } else {
        i.defaultValue = null;
      }
    });
  };
  defineExpose({
    show,
  });
</script>
<style lang="less" scoped>
  .preview-form {
    .ant-drawer-footer {
      padding: 0 !important;
    }
  }
</style>
